<template>
  <div class="app-container">
    <el-row :gutter="30">
      <el-col :span="24">
        <div style="margin-top:10px">
          <!--<el-button icon="el-icon-plus" type="primary" size="mini" @click="mergeData">合并</el-button>-->
          <el-button icon="el-icon-close" type="danger" size="mini" @click="deleteAny">删除</el-button>
        </div>
        <div class="query-form">

          <el-form ref="tableSearchParam" :model="tableSearchParam" label-width="50px" :inline="true">
            <el-form-item label="所属公司" label-width="70px">
              <el-select v-model="tableSearchParam.rescueCompanyId" placeholder="请选择" no-data-text="暂无数据"
                         style="width:200px" clearable>
                <el-option
                  v-for="item in allRescueCompany"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所属行业" label-width="70px">
              <el-select v-model="tableSearchParam.industryIds" placeholder="请选择" no-data-text="暂无数据"
                         style="width:200px" multiple clearable>
                <el-option
                  v-for="item in industryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="认证类型" label-width="70px">
              <el-select v-model="tableSearchParam.authType" placeholder="请选择" no-data-text="暂无数据"
                         style="width:200px" clearable>
                <el-option
                  v-for="item in authTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="姓名" label-width="50px">
              <el-input v-model="tableSearchParam.employeeName" style="width:200px" size="small" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="listTableData" icon="el-icon-search" size="small">查询</el-button>
              <el-button type="primary" @click="dialogExportVisible = true" icon="el-icon-download" size="small">导出</el-button>
            </el-form-item>
          </el-form>
        </div>
        <br/>
        <el-table
          :data="tableData"
          border
          empty-text="暂无数据"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="35">
          </el-table-column>
          <el-table-column
            label="真实姓名"
            property="employeeName"
            width="80">
          </el-table-column>
          <el-table-column
            label="手机号"
            property="telphone"
            width="100">
          </el-table-column>
          <el-table-column
            label="所属行业"
            property="industry">
          </el-table-column>
          <el-table-column
            label="认证类型"
            property="authType" :formatter="authTypeFormat">
          </el-table-column>
          <el-table-column
            label="所属公司"
            property="companyName">
          </el-table-column>
          <el-table-column
            label="所在省份"
            width="80">
            <template slot-scope="scope">
              <span>{{scope.row.region? scope.row.region.split(',')[0]:''}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="所在城市"
            width="80">
            <template slot-scope="scope">
              <span>{{scope.row.region?scope.row.region.split(',')[1]:''}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                icon="el-icon-view"
                @click="viewData(scope.$index, scope.row)">查看
              </el-button>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-close"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=this.currentPage
            :page-sizes="[10, 20, 30, 40]"
            :page-size=this.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.total>
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="员工详情" :visible.sync="dialogFormVisible" top="10vh" width="70%">
      <div style="height:400px;overflow-y: auto">
        <el-row>
          <el-col :span="4" class="m-col">真实姓名</el-col>
          <el-col :span="8" class="m-col-left">{{formData.employeeName}}</el-col>
          <el-col :span="4" class="m-col-left">手机号</el-col>
          <el-col :span="8" class="m-col-left">{{formData.telphone}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">性别</el-col>
          <el-col :span="8" class="m-col-left">{{formData.gender?"":(formData.gender==='male'?"男":"女")}}</el-col>
          <el-col :span="4" class="m-col-left">是否车主</el-col>
          <el-col :span="8" class="m-col-left">{{formData.hasCar?"":(formData.hasCar==='N'?"否":"是")}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">认证类型</el-col>
          <el-col :span="8" class="m-col-left">{{formData.authType === 1 ? "公司":(formData.authType === 2 ?"个人":"")}}</el-col>
          <el-col :span="4" class="m-col-left">所属行业</el-col>
          <el-col :span="8" class="m-col-left">{{formData.industry}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">所属公司</el-col>
          <el-col :span="20" class="m-col-left">{{formData.companyName}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">紧急联系人</el-col>
          <el-col :span="8" class="m-col-left">{{formData.emergencyName||''}}</el-col>
          <el-col :span="4" class="m-col">紧急联系电话</el-col>
          <el-col :span="8" class="m-col-left">{{formData.emergencyPhone||""}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m_col_normal">准确收件地址</el-col>
          <el-col :span="20" class="m_col_normal">{{formData.address}}</el-col>
        </el-row>
        <el-row v-if="formData.drivingLience!=null">
          <el-col :span="4" class="m-col-bottom" style=" border-top: 1px solid #ebeef5;">行驶证</el-col>
          <el-col :span="20" class="m-col-bottom-left" style=" border-top: 1px solid #ebeef5;">
            <div style="margin-top: 25px" v-if="formData.drivingLience!=null">
              <div style="width: 100px;height: 100px" @click="showImg(formData.drivingLience.url)">
                <img :src="formData.drivingLience==null?'':baseUrl+formData.drivingLience.url"
                     style="width:100%;height:100%"></img>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row v-if="formData.driverLience!=null">
          <el-col :span="4" class="m-col-bottom">驾驶证</el-col>
          <el-col :span="20" class="m-col-bottom-left">
            <div style="margin-top: 25px" v-if="formData.driverLience!=null">
              <div style="width: 100px;height: 100px" @click="showImg(formData.driverLience.url)">
                <img :src="formData.driverLience==null?'':baseUrl+formData.driverLience.url"
                     style="width:100%;height:100%"></img>
              </div>
            </div>
          </el-col>
        </el-row>
        <!--<el-row>-->
        <!--<el-col :span="4" class="m-col-bottom" style="height:350px;">身份证</el-col>-->
        <!--<el-col :span="20" class="m-col-bottom-left" style="height:350px">-->
        <!--<div style="margin-top: 25px" v-if="formData.idCards.size!=0">-->
        <!--<img :src="item.url" v-for="item in formData.idCards" width="200" height="300"-->
        <!--style="margin-left:20px"></img>-->
        <!--</div>-->
        <!--</el-col>-->
        <!--</el-row>-->
        <!--<el-row>-->
        <!--<el-col :span="4" class="m-col-bottom">负责人照</el-col>-->
        <!--<el-col :span="20" class="m-col-bottom-left">-->
        <!--<div style="margin-top: 25px" v-if="formData.applicants!=null">-->
        <!--<img :src="formData.applicants==null?'':formData.applicants.url" width="200" height="200"-->
        <!--style="margin-left:20px"></img>-->
        <!--</div>-->
        <!--</el-col>-->
        <!--</el-row>-->
      </div>
    </el-dialog>
    <el-dialog title="查看图片" :visible.sync="dialogImgFormVisible" top="10vh">
      <div style="text-align: center">
        <img :src="baseUrl+imgUrl" style="width:80%;height: auto">
      </div>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>

    <el-dialog title="导出条件" :visible.sync="dialogExportVisible">
      <el-form>
        <el-form-item label="创建时间">
          <el-date-picker
                  v-model="dateRange"
                  @change="handleDateChange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hideDialog">取 消</el-button>
        <el-button type="primary" @click="exportInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>

  .page {
    text-align: center;
    margin-top: 20px;
  }

  .query-form {
    border-bottom: 1px solid #ebeef5;
    padding-top: 25px;
  }

  .m-col {
    border: 1px solid #ebeef5;
    border-bottom: none;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
    color: #909399;
    font-weight: 500;
  }

  .m-col-left {
    border: 1px solid #ebeef5;
    border-left: none;
    border-bottom: none;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
  }
  .m_col_normal{
    border: 1px solid #ebeef5;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
  }

  .m-col-bottom {
    border: 1px solid #ebeef5;
    border-top: none;
    padding-left: 10px;
    height: 250px;
    line-height: 250px;
    color: #909399;
    font-weight: 500;
  }

  .m-col-bottom-left {
    border: 1px solid #ebeef5;
    border-top: none;
    border-left: none;
    padding-left: 10px;
    height: 250px;
    line-height: 250px;
  }

</style>

<script>
  import rescueEmployeeApi from '@/api/rescueEmployeeApi'
  import rescueCompanyApi from '@/api/rescueCompanyApi'
  import industryApi from '@/api/industryApi'
  import { exportEmployeeInfo } from '@/api/exportApi';
  import {formatDate} from '@/utils/dateUtil';
  export default {
    created() {
      rescueCompanyApi.listAllRescueCompany({}, (res) => {
        this.allRescueCompany = res
      }, () => {
      })
      this.getAllIndustry()
      this.initData()
    },
    data() {
      return {
        dateRange:[],
        beginDate:'',
        endDate:'',
        authTypeOptions: [{value:'1',label:'公司'},{value:'2',label:'个人'}],
        baseUrl: process.env.IMG_BASE_URL,
        dialogImgFormVisible: false,
        imgUrl: '',
        allRescueCompany: [],
        industryList:[],
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        tableSearchParam: {
          employeeName: '',
          authType:'',
          industryIds:[]
        },
        dialogFormVisible: false,
        dialogExportVisible:false,
        formLabelWidth: '70px',
        formData: {
          companyName: '',
          employeeName: '',
          telphone: '',
          region: '',
          address: '',
          drivingLience: {},
          driverLience: {},
          idCards: [],
          applicants: {},
          authType:'',
          industryIds:[]

        },
        loading: false,
        actionType: '',
        multipleSelection: [],
        rules: {
          name: [
            {required: true, message: '请输入平台名称', trigger: 'blur'},
            {max: 50, message: '长度不超过50 个字符', trigger: 'blur'}
          ]
        },
        rulesManager: {
          newManagerId: [
            {required: true, message: '请选择负责人', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      hideDialog(){
        this.dialogExportVisible = false
      },
      handleDateChange(event){
        if(event && event.length===2){
          this.beginDate = formatDate(event[0],'yyyy-MM-dd 00:00:00');
          this.endDate = formatDate(event[1],'yyyy-MM-dd 23:59:59');
        }
      },
      exportInfo(){
        const queryParams = {
          beginDate:this.beginDate,
          endDate:this.endDate
        }
        exportEmployeeInfo(queryParams).then(response=>{
          if(!response.hasError){
            if(response.message){
              this.$message({
                type: 'info',
                message: response.message
              })
            }else{
              let exportUrl = response.result.exportUrl;
              window.open(process.env.BASE_API +exportUrl , '_blank')
            }
          }else{
            this.$message({
              type: 'error',
              message: '生成导出文件失败,请稍候再试!'
            })
          }
        })
        this.hideDialog();
      },
      getAllIndustry(){
        industryApi.listAll((res) => {
            console.log(123)
            this.industryList = res
          },() =>{})
      },
       authTypeFormat(row, column) {

        if (row.authType === 1) {
          return '公司'
        } else if (row.authType === 2) {
          return '个人'
        }
      },
      showImg(url) {
        this.dialogImgFormVisible = true
        this.imgUrl = url
      },
      initData() {
        this.listTableData()
      },
      listTableData() {
        rescueEmployeeApi.listOperationDriver(this.tableSearchParam, this.currentPage, this.pageSize, (res) => {
          this.tableData = res.list
          this.total = res.total
        }, () => {
        })
      },
      mergeData() {

      },
      handleMerge() {

      },
      viewData(index, row) {
        //清空历史值
        this.formData = {
          companyName: '',
          employeeName: '',
          telphone: '',
          region: '',
          drivingLience: {},
          driverLience: {},
          idCards: [],
          applicants: {},
          address: '',
          authType:'',
          industry:''
        }
        for (var t of this.tableData) {
          if (t.id == row.id) {
            this.formData = t
            break
          }
        }
        this.dialogFormVisible = true
      },
      handleDelete(index, row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          rescueEmployeeApi.deleteSingleRescueEmployee(row.id, (res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.initData()
          }, () => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.listTableData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.listTableData()
      },
      handleSelectionChange(val) {
        this.multipleSelection = []
        for (var ms of val) {
          this.multipleSelection.push(ms.id)
        }
      },
      deleteAny() {
        if (this.multipleSelection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请选择记录!'
          })
          return;
        }
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          rescueEmployeeApi.removeRescueEmployee(this.multipleSelection, (res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.initData()
          }, () => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    }
  }
</script>
